<template>
  <div>
    <!--条件搜索区域-->
    <el-row>
      <el-col :span="24">
        <el-card header=" ">
          <span class="header2">订单列表</span>
          <el-form :inline="true" style="margin: 0 0 0 300px">
            <el-form-item label="用户名称：">
              <el-input
                  v-model="searchOrder.orderName"
                  placeholder="用户名"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button  @click="exportExcel">
                <i class="el-icon-download"></i>下载所有订单信息
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!--数据显示区域-->
    <el-row>
      <el-col :span="24">
        <el-card>
          <!-- 订单的详细信息 -->
          <el-table :data="orderData" style="width: 100%">
            <el-table-column
                width="40"
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                width="110"
                prop="userName"
                label="用户">
            </el-table-column>
            <el-table-column
                width="250"
                prop="orderNo"
                label="订单号">
            </el-table-column>
            <el-table-column
                width="175"
                prop="title"
                label="产品名称">
            </el-table-column>
            <el-table-column
                width="100"
                prop="totalFee"
                label="价格/￥">
            </el-table-column>
            <el-table-column
                width="200"
                prop="orderStatus"
                label="订单状态">
            </el-table-column>
            <el-table-column
                width="180"
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column label="操作" width="210">
              <template slot-scope="scope">
                <el-popconfirm :title="('确定删除第'+ scope.row.id +'个订单吗？')" @confirm="remove(scope.row.id)">
                  <!--删除按钮-->
                  <el-button
                      icon="el-icon-close"
                      size="mini"
                      type="danger"
                      slot="reference">删除
                  </el-button>
                </el-popconfirm>
                <!--退款按钮-->
                <el-button
                    style="margin: 0 0 0 15px;"
                    v-if="scope.row.orderStatus==='支付成功'||scope.row.orderStatus==='支付成功，用户已删除'"
                    icon="el-icon-sort"
                    size="mini"
                    type="primary"
                    @click="refundsBtn(scope.row.id,scope.row.orderNo)"
                    slot="reference">退款
                </el-button>
                <!-- 退款时弹出的确认对话框 -->
                <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
                  <span style="margin-left: 25%">确定退款回第<span
                      style="color: red">{{ orderRefunds.id }}</span>号订单的用户吗？</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="refunds">确 定</el-button>
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <el-row class="page-row">
      <el-pagination
          class="el-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 30, 50]"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="currentChange"
          @next-click="currentChange"
          :current-page="current"
          :page-size="size"
          :total="total">
      </el-pagination>
    </el-row>

  </div>
</template>
<script>
import order from "../api/order"
import refunds from "../api/refunds"

export default {
  data() {
    return {
      adminName: "",
      // 是否显示提示框
      centerDialogVisible: false,
      // 退款时的数据
      orderRefunds: {
        id: null,
        orderNo: '',
      },
      // 搜索条件对象
      searchOrder: {
        orderName: '',
      },
      // 产品数据 (页面初始化时会将数据传进来)
      orderData: [],
      size: 5, // 每页的数据大小
      current: 1, //当前页数
      total: 0, // 总数量
    }
  },
  created() {
    this.getData()
    if(JSON.parse(localStorage.getItem('adminName')) === null){
      this.$router.push("/login")
    }else{
      setTimeout(() => {
        // 20毫秒后读取浏览器缓存
        this.adminName = JSON.parse(localStorage.getItem('adminName'))
      }, 20)
    }
  },
  methods: {
    // 下载订单
    exportExcel() {
      // 这里可以传入一些查询参数，我在这里传入了标题内容
      // 将标题内容作为导出的Excel文件名,此处的标题内容后期可动态改变
      let url = 'http://127.0.0.1:8051/api/order/exportExcel/订单信息'
      window.open(url)
    },
    // 点击退款按钮时保存值
    refundsBtn(id, orderNo) {
      this.orderRefunds.id = id
      this.orderRefunds.orderNo = orderNo
      this.centerDialogVisible = true
    },
    // 退款
    refunds() {
      refunds.refundsByOrderNo(this.orderRefunds.orderNo).then(r => {
        if (r.code === 0) {
          this.$message.success(r.message)
        }
        if (this.searchOrder.orderName !== '') {
          this.search()
        } else {
          this.getData()
        }
      })
      this.centerDialogVisible = false
    },
    // 根据搜索条件查询
    search() {
      if (this.searchOrder.orderName !== '') {
        order.getOrderByUserName(this.searchOrder.orderName, this.current, this.size).then(r => {
          let orderList = r.data.orderList
          this.total = r.total
          this.orderData = orderList
          // 将分转化为元
          for (let i = 0; i < orderList.length; i++) {
            this.orderData[i].totalFee = orderList[i].totalFee / 100
          }
        })
      } else {
        this.$message.error("搜索的用户名不能为空")
      }
    },
    // 删除
    remove(id) {
      order.deleteOrderByOrderId(id).then(r => {
        this.$message.success(r.message)
        if (this.searchOrder.orderName !== '') {
          this.search()
        } else {
          this.getData()
        }
      })
    },
    // 每页大小修改
    sizeChange(val) {
      this.size = val
      if (this.searchOrder.orderName !== '') {
        this.search()
      } else {
        this.getData()
      }
    },
    // 第几页
    currentChange(val) {
      this.current = val
      if (this.searchOrder.orderName !== '') {
        this.search()
      } else {
        this.getData()
      }
    },
    // 获取数据，并赋值给wordData
    getData() {
      order.getOrderPage(this.current, this.size).then(r => {
        let orderList = r.data.orderList
        this.total = r.total
        this.orderData = orderList
        // 将分转化为元
        for (let i = 0; i < orderList.length; i++) {
          this.orderData[i].totalFee = orderList[i].totalFee / 100
        }
      })
    }
  }
}
</script>

<style>
@import "~@/assets/css/ddgl.css";
</style>
